<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>银行名称：</label><el-input placeholder="请输入内容" v-model="searchData.displayName" ></el-input></p>
              <p><label>是否应用：</label>
                <el-select v-model="searchData.isEnable" placeholder="请选择">
                    <el-option
                      v-for="item in iSstate"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
              </p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="add">新增</el-button>
      </div>
      <tableVue :list="list" :state="false" v-loading="loading" :total="total" @sizeChange="handSize">
          <slot>
            <el-table-column label="银行LOGO" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.bankLogo" alt="" id="ig">
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="compile(scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type='success'
                    v-if="scope.row.isEnable == '否'"
                    @click="on_off(scope.row,'Y')">启用
                  </el-button>
                  <el-button
                    size="mini"
                    type='success'
                    v-if="scope.row.isEnable == '是'"
                    @click="on_off(scope.row,'N')">关闭
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

          </slot>
      </tableVue>
        <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
            <slot>
                <el-form :model="ruleForm" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                    <el-form-item label="	银行中文名称" prop="bankCname">
                        <el-input v-model="ruleForm.bankCname" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="	银行英文名称" prop="bankEname">
                        <el-input v-model="ruleForm.bankEname" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="	显示名称" prop="displayName">
                        <el-input v-model="ruleForm.displayName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="	银行编码" prop="bankCode">
                        <el-input v-model="ruleForm.bankCode" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="isEnable">
                      <el-select v-model="ruleForm.isEnable" placeholder="请选择">
                          <el-option
                            v-for="item in Enable"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                     </el-form-item>
                     <el-form-item label="品牌Logo" prop="brandLogo">
                       <el-upload
                          class="upload-demo"
                          ref="upload"
                          :limit="1"
                          :action="uploadingImg"
                          :on-change="changeImgFile"
                          :http-request='custom'
                          :file-list="fileList"
                          :on-exceed="exceed"
                          list-type="picture"
                          :auto-upload="false">
                          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                          <el-button style="margin-left: 10px;" size="small" type="success" @click="custom">上传到服务器</el-button>
                        </el-upload>
                      </el-form-item>
                    <el-form-item class="confirm">
                        <el-button type="primary" v-if="btnState=='1'" @click="upForm('post')">确定</el-button>
                        <el-button type="primary" v-if="btnState=='2'" @click="upForm('put')">更新</el-button>
                    </el-form-item>
                </el-form>
            </slot>
        </dialogVue>
    </div>
</template>

<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  bankList,addCompileBank,
  switchBank,delBank
} from "@/api/payCenter/payCenter";
import {
  upLoadingImg
} from "@/api/shoppingCentre/shoppingCentre";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getBankList()
  },
  methods : {
    getBankList (data) {
        bankList(data).then(res=>{
          if (res.data.code == 'OK') {
              this.loading = false;
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               item.isEnable = item.isEnable == 'Y' ? '是' : '否'
               return item;
            });

          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    add () {
      this.dialog = true;
      this.btnState = '1'
    },
    changeData (data) {
      this.dialog = data;
    },
    search () {
      this.getBankList(this.searchData)
    },
    compile (item) {
      this.fileList = [];
      this.fileList.push({
        url : item.bankLogo,
        name : ''
      })
      this.dialog = true;
      this.btnState = '2';
      this.ruleForm.bankCname = item.bankCname;
      this.ruleForm.displayName = item.displayName;
      this.ruleForm.bankEname = item.bankEname;
      this.ruleForm.bankCode = item.bankCode;
      this.ruleForm.isEnable = item.isEnable;
      this.ruleForm.bankId = item.bankId;
      this.fileList.map(item=>{return this.ruleForm.bankLogo = item.url})
    },
    del (item) {
      this.delMessage(()=>{
          var id = Array.of(item.bankId)
          delBank(id).then(res=>{
          if (res.data.code == 'OK') {
              this.$message.success('删除成功');
              this.getBankList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      })
    },
    upForm (method) {
      addCompileBank(this.ruleForm,method).then(res=>{
        if (res.data.code == 'OK') {
            this.dialog = false;
            if (method == 'post') {
              this.$message.success('新增银行成功');
            } else {
              this.$message.success('编辑银行成功');
            }
            this.getBankList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handSize (val) {
      var data = {
        current : val,
        isEnable : this.searchData.isEnable
      }
      this.getBankList(data)
    },
    on_off (item,isEnable) {
      var data=  {
        bankId : item.bankId,
        isEnable :isEnable
      }
      switchBank(data).then(res=>{
        if (res.data.code == 'OK') {
            this.getBankList()
           if (isEnable == 'Y') {
             this.$message.success('开启成功')
           } else {
             this.$message.success('关闭成功')
           }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    changeImgFile (file) {
        let reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload =  () => {
          this.imgData.base64Str = reader.result.split(',')[1];
        }
        this.imgData.id = file.uid;
        this.imgData.fileOriginName = file.name;
        this.imgData.fileType = file.name.split('.')[1];
    },
    exceed (files, fileList) {
      this.$message.error("只能传一张图片");
    },
    custom (file) {
      var data = {
        base64Str : this.imgData.base64Str,
        fileOriginName : this.imgData.fileOriginName,
        fileType : this.imgData.fileType,
        id : this.imgData.id,
      }
      if (data.base64Str == '') {
        this.$message.error('请先上传到服务器')
        return false
      }
      this.$message({
         showClose: true,
         message: '图片正常在上传请稍后.......',
         type: 'warning'
       });
      upLoadingImg(data).then(res=>{
        if (res.data.code == 'OK') {
            this.$message.success('上传图片成功');
            this.ruleForm.bankLogo = res.data.data.fileURL
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  #ig {
    width: 50px;
    height: 50px;
  }
</style>
